說到CSS的學習與教學，基本上最多人會卡到的問題就是CSS屬性這麼多，好難學懂或是學到完整，基本上這個問題對於多數的網頁新手來說，始終都是個難解的困擾，但實際上學習網頁或是學習CSS，絕對沒有你想像中的困難，相對地透過有系統的分類規劃來學習，不求一次學到完整，而是先規劃出那些是你必要學習的，哪些反之可暫時忽略，反倒能夠讓你輕鬆上手，而不會有這麼大的學習恐懼。

學習CSS真的不難，難在你根本只想走捷徑

學習CSS的方式，我們可以利用以下幾個方式來讓自己不會掉入學習恐懼的地步，也讓自己能在學習過程中，享受進步的喜悅，就讓我們來看看怎麼學習吧

1. 列舉常用的CSS屬性
2. 把屬性作好分類
3. 學習每個CSS屬性時了解該屬性的作用對象是誰
4. 做好筆記
5. 善用心智圖
   (關於心智圖的應用可見Amos此「直播 : XMIND 心智圖超好用」以及「怎麼學CSS」說明)

做好以上這幾點學習的要點，相信各位在學習CSS上面會更加的得心應手啦

1.常用的CSS屬性

一般大眾在開發網頁時，其實CSS負責的都是將資料做視覺上的處理，所以我們就資料面來看，我們會拿到的資料有哪些?

1. 標題
2. 內文
3. 清單
4. 圖片
5. 色彩

以上大致列舉五種資料，而實際上資料可能更多種，但以上這幾種資料應該不論哪一個網頁都可以見到吧，所以我們就能夠先把這幾個資料有關的CSS屬性列舉出來，開始找有哪些CSS屬性是我們可以學習的。而多數我們的需求不外乎就是...

1. 文字大小的設定
2. 文字色彩的設定
3. 文字粗細怎麼設定
4. 斜體字怎麼處理
5. 段落間距怎麼設定
6. 超連結的底線怎麼拿掉?
7. 背景色彩怎麼控制
8. 背景圖片怎麼製作
9. 圖片大小怎麼控制
10. 圖片圓角怎麼製作

上面列舉了我們對網頁資料常見的工作需求，光是這幾個需求就能馬上去找到我們需要的CSS屬性了，是不是真的很簡單呢?!

2.把CSS屬性作好分類

CSS屬性的教學最麻煩的就是眾多的CSS屬性，新手面對眾多的CSS屬性來說，感覺有些混亂，在學習上面也會感受學習的壓力與煩躁，然而倘若做好CSS屬性的分類，新手在學習CSS的過程也就可以藉由有系統的CSS屬性分類，來找到問題對應的CSS屬性是哪個，不僅學習變得簡單許多，對大腦記憶的負擔也就更低，針對CSS屬性的分類，Amos簡單的列舉一些給各位參考看看

• 文字相關的CSS屬性
• 段落相關的CSS屬性
• 背景相關的CSS屬性
• 清單相關的CSS屬性
• 尺寸設定相關的CSS屬性
• 色彩相關的CSS屬性
• 邊框相關的CSS屬性
• 定位相關的CSS屬性

對於這樣的分類，不知道各位看了之後有沒有比較有點概念了呢。針對你的工作需求，一項項去把他學習起來，感覺就簡單許多了呢!

3.學習每個CSS屬性時，了解該屬性的作用對象是誰?

在學習CSS屬性時，多數的新手都會發生「這個屬性設定了怎麼沒有作用?」的狀況，明明看別人設定都有效啊，我也是複製他的原始碼過來改的啊，怎麼他就可以我就不行 (怎麼你就沒懷疑過是你人品有問題嗎) ?其實這一類的狀況Amos也是時有所聞，其實一開始Amos也不懂為什麼一個版面我就可以你就不行 (我知道!我都是靠顏值切出版面的，人帥就是個罪過...甩髮) ，其實我們在學習CSS屬性時，需要特別注意CSS屬性作用的對象可以簡單分成以下三種+一種影響因素

1. 屬性作用對象是自己
2. 屬性作用對象是子層
3. 屬性作用對象是自己跟子層
4. 是否對周遭物件產生影響

Amos舉寬度(width)來作例子好了，寬度的設定是對自己有作用，對子層基本上沒作用，但對周遭物件可能產生空間的擠壓，再舉個例子則是字級(font-size)這個屬性，font-size這個屬性可以對HTML元素(tag)內的文字產生作用，並且對其內部所有子層都能產生繼承的效果，而width則不會有這繼承的問題。

註: 「繼承」一詞簡單的說，就是子層物件會直接套用跟父層相同CSS屬性設定，常見會有繼承這種特性的CSS屬性，多見於文字相關的CSS屬性，其他的CSS屬性則大都不會繼承父層的CSS屬性。

4.做好筆記

作筆記是一定需要的，但是作筆記的方式則是每個人都不同，對於Amos來說，我會將筆記做成一個教學文章，而這個教學文章的教學對象則是我自己，因為Amos本身不是個天資聰穎的人，所以會盡量用自己能看懂的文字描述來寫給自己看，字數或許會多一點，但對於未來可能會忘記的自己來說，這份教學筆記可說是Amos的寶典啊!而在撰寫筆記的過程中，為了將艱澀難懂的技術轉成金魚都能懂的筆記文字，在腦內會經過多段的梳化過程，好把文字變的更加簡單理解，相對的反倒讓自己對技術有更深入的理解，且更容易記憶。縱使對於目前盛行的速食文化，甚麼都要快!甚麼都要標準答案的生活型態來說，這種方式可能顯得非常沒有效率，但對長久而言，其實是更穩固了自己的觀念，對日後的工作其實起了非常大的幫助呢!

5.善用心智圖

心智圖是Amos近年來一直大力推坑周遭朋友的一個筆記方式，許多新手或非領域內的人可能會說「我邏輯不好」、「我記憶不好」、「我理解能力不佳」、「我就金魚腦」、「我就是笨才會喜歡你這麼久」...，其實多數人邏輯不好是正常的 (你才邏輯不好，你全家都邏輯不好) ，想當初Amos邏輯也不好，現在也不好，以後可能也不好，但是我會善用工具(已知用火的猿人)，在學習一個新技術時，Amos經常利用心智圖來將雜亂無章的內容或要點做整理、歸納、分析，然後找出自己容易記憶的方式與筆記方式，一但發現筆記上面有歸納或分類的矛盾或衝突，就重新思考並檢視這邊的理解哪裡有問題?最終對於這些技術的理解就會越來越清晰透澈。

學習CSS的盲點，太懶!

許多新手在學習CSS屬性的時候，卡到問題時有不少人都會選擇找人詢問，因為這是最快能拿到答案的方式，也最省時間，但卻自我放棄了思考的能力，其實有時候仔細去檢視一下畫面上面的問題，並且一樣樣的去分析撰寫中的順序，與畫面產出的狀況，接著回頭想想CSS屬性的原理，並推導那個過程，通常答案就會呼之欲出了，在Amos的教學歷程中，有把這個過程做好的人，多數都會在自我推導的過程中得到解答。

學習CSS請善用工具

學習CSS的過程中，經常會發生設定無效，或是與預想不符的狀況，此時我們可以利用網頁開發者工具來檢視你的原始碼與畫面，看看你的網頁實際套用了哪些CSS，接著來判斷是出了甚麼問題? 有時候是CSS優先權的問題(可參閱「金魚都能懂的CSS選取器」一書第1-3節)、有時候是英文拼錯字的問題、有時候是屬性寫錯的問題。

此外目前許多的文字編輯器(如 VS Code、Sublime text)都有提供原始碼提示及補全功能，你只需要輸入CSS屬性開頭的文字，軟體就會跳出相關的CSS屬性提示，這樣即可降低CSS屬性輸入的錯誤。但倘若英文不好，好歹也能善用「google翻譯」來將屬性翻譯成中文來增加記憶的成效，這樣就不會成為被英文耽誤的CSS學習者了。

學習CSS請保持積極開放的心態

許多學習者都是遇到問題就卡在那邊停滯不前，基本上有時候可以饒過自己一下，先把其他補足再靜下心回頭來想想卡住的這個部分，往往都會有不錯的成效，講個經驗，Amos當初自習 Photoshop時可是卡關卡了半年，學習CSS 3D時也是卡了數個月呢，但經過不屈不撓的牛步學習，最終也是學會了啊!所以千萬不要因為一個小挫折就放棄了，CSS真的很好玩的，相信我!不相信的話，你來上我的課你就會知道了(喂!不要突然開工商模式啊)

以上就是學習CSS屬性的幾個基本原則、方法與心態，接下來的二十多天，就跟著Amos一起來體驗金魚都能懂的CSS必學屬性有哪些吧!讓我們最後也能喊出「我金魚!我驕傲!」

「金魚都能懂的CSS選取器」已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw

讓我們好好善用CSS選取器吧

金魚都能懂的教學系列

• 金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎 系列

鐵人雙主題挑戰中，歡迎訂閱一波

金魚都能懂的Bootstrap5網頁框架開發

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學